<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-12 15:49:03
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-12 17:14:15
 * @Description  : 
-->
<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-12 14:38:59
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-12 15:46:43
 * @Description  : 
-->
<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-12 14:38:59
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-12 14:42:34
 * @Description  : 
-->
<template>
	<uv-navbar :fixed="true" :placeholder="true" @leftClick="$onClickLeft" :title="title" bgColor="#fff"/>
	<view style="padding: 20rpx;">
		<view class="container">
			<uv-divider
				text="会员特权"
				textColor="#000"
				textSize="15"
				lineColor="#94bcff"></uv-divider>
			<view class="vipList">
				<view class="vipItem">
					<div class="vipItemIcon">
						<image src="/static/images/mine/discount.png"></image>
					</div>
					<div class="vipItemTitle">开卡享{{ currentItem.discount }}折</div>
				</view>
				<view class="vipItem">
					<div class="vipItemIcon">
						<image src="/static/images/mine/score.png"></image>
					</div>
					<div class="vipItemTitle">开卡赠送{{ currentItem.integral || 0 }}积分</div>
				</view>
				<view class="vipItem">
					<div class="vipItemIcon">
						<image src="/static/images/mine/money.png"></image>
					</div>
					<div class="vipItemTitle">开卡赠送{{ currentItem.money || 0 }}元</div>
				</view>
			</view>
			<uv-divider
				text="使用说明"
				textColor="#000"
				textSize="15"
				lineColor="#94bcff"></uv-divider>
			<view v-html="currentItem.rule" class="payList"></view>
			
		</view>
        <view class="isBottomBtn">
            <uv-button type="primary" @click="buyVip" block>立即购买</uv-button>
			<uv-safe-bottom></uv-safe-bottom>
        </view>
	</view>
	
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { userGetUserInfo, mineService, vipCardPage, createVipCardOrder } from '@/api/user'
	import { payUnify } from '@/api/order'
	import { isWeixin } from '@/utils/util'

	const title = ref('会员详情')
	const dataList = ref([])
	const paging = ref()
	const currentItem = ref({})
	onShow(() => {})
	onLoad(options => {
		console.log(options)
		currentItem.value = JSON.parse(options.item)
	})
	const buyVip = async () => {
		let data = {
			orderType: 'vipcard',
			paytype: '',
			from: 'wechat',
			id: currentItem.value.id,
		}
		let order = await createVipCardOrder(data)
		if (!order) {
			uni.hideLoading()
			return
		}
		uni.navigateTo({
			url: `/pages/components/pages/payType/payType?id=${order.orderId}`,
		})
	}
</script>

<style lang="scss" scoped>
	page {
		height: auto;
		min-height: 100%;
	}

	.container {
        padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: auto;
		display: flex;
		flex-direction: column;
		.vipList {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
            margin-bottom: 20rpx;
			.vipItem {
				display: flex;
				align-items: center;
				flex-direction: column;

				.vipItemIcon {
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
					padding: 8rpx;
					background-color: #ff8f41;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.vipItemTitle {
					color: #999;
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
		}

		.payList {
            margin-bottom: 20rpx;
		}
	}

	.isBottomBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
